<template>
	<view style="background-color: #FFFFFF;">
		<view style="width: 100%;display: flex;padding: 20upx 20upx;background-color: #fff;">
			<view style="flex: 2;" v-if="maininfo.img">
				<image style="width: 30vw;height: 30vw;" :src="imgSrc+'/'+maininfo.img" ></image>
			</view>
			<view style="flex: 2;" v-else>
				<image style="width: 30vw;height: 30vw;" src="/static/logo.png" ></image>
			</view>
			
			<view style="flex: 8;padding-left: 20upx;">
				<view style="font-weight: bold;display: flex;">
					<view style="flex: 8;">{{ maininfo.name }}</view>
					<view style="flex: 2;">
						
						<uni-icons @tap="hotToggle" :type="'star'+forbid" size="20" color="#ffa400" />
					
					</view>
				</view>

				<view style="font-size: 24upx;">年份：{{ maininfo.year||'暂无' }}</view>
				
				<view v-if="tableList[0].price" style="font-size: 24upx;">参考价：{{ tableList[tableList.length-1].price }}</view>
				
				<view v-else style="font-size: 24upx;">参考价：{{ maininfo.price }}</view>
				
				<view style="font-size: 24upx;">规格：{{ maininfo.volume }}</view>
				<!-- <view style="display: flex;">
					<button style="padding: 0 50upx;height: 50upx;line-height: 50upx;font-size: 30upx;background-color: #db3542;color: #FFFFFF;">找({{maininfo.fpeople}}人)</button>
					<button style="padding: 0 50upx;height: 50upx;line-height: 50upx;font-size: 30upx;background-color: #007e04;color: #FFFFFF;">出(({{maininfo.opeople}}人)</button>
				</view> -->
			</view>
		</view>

		<ms-tabs :list="type3" v-model="active3" itemColor="#db3542" lineColor="#db3542" @input="inputv" :sendData="inputval" class="page_header" lineAnimated="true"></ms-tabs>

		<view class="qiun-charts">
			<!--#ifdef MP-ALIPAY -->
			<canvas
				canvas-id="canvasArea"
				id="canvasArea"
				class="charts"
				:width="cWidth * pixelRatio"
				:height="cHeight * pixelRatio"
				:style="{ width: cWidth + 'px', height: cHeight + 'px' }"
				@touchstart="touchIt($event, 'canvasArea')"
			></canvas>
			<!--#endif-->
			<!--#ifndef MP-ALIPAY -->
			<canvas canvas-id="canvasArea" id="canvasArea" class="charts" @touchstart="touchIt($event, 'canvasArea')"></canvas>
			<!--#endif-->
		</view>

		<view style="width: 100%;display: flex;padding: 20upx 20upx;font-size: 26upx;" >
				
			<view class="inboxdata" >
				<uCalendar fields="day" :currentDate="dateValue" startDate="2010" :endDate="overdateValue" @calendarChange="selectDateFun" @columChange="columChangeFun"></uCalendar>
			</view>
			<view style="flex: 1;line-height: 50upx;font-size: 30upx;text-align: center;">至</view>

			<view class="inboxdata">
				<uCalendar fields="day" :currentDate="dateValue2" startDate="2010" :endDate="overdateValue2" @calendarChange="selectDateFun2" @columChange="columChangeFun"></uCalendar>
				<!-- <input style="border: 1px solid #dee0e5;border-radius: 10upx;text-align: center;height: 50upx;" value="2020-5-1" />
					 -->
			</view>
			<view style="flex: 3;"><button class="cxbtn" @click="search">查询</button></view>
		</view>

		<view class="box">
			<t-table @change="change">
				<t-tr>
					<t-th>日期</t-th>
					<t-th>参考价</t-th>
					<t-th>涨跌</t-th>
					<t-th>涨幅</t-th>
				</t-tr>
				<t-tr v-for="item in tableList" :key="item.id">
					<t-td>{{ item.addtime |dateFormat}}</t-td>
					<t-td>{{ item.price }}</t-td>
					<t-td v-if="item.updown" style="color: #a22c32;">{{ item.updown }}</t-td>
					<t-td v-else style="color: #a22c32;">0</t-td>
					
					
					<t-td v-if="item.upp" style="color: #a22c32;">{{ item.upp }}</t-td>
					<t-td v-else style="color: #a22c32;">0%</t-td>
				</t-tr>
			</t-table>
		</view>

			
			
			

			<ms-tabs :list="type4" v-model="active4" itemColor="#db3542" lineColor="#db3542" @input="inputv4" :sendData="inputval4" class="page_header" lineAnimated="true"></ms-tabs>
			 
			 
			 
			<view v-if="stype=='b'" >
			
		
			<view style="font-size: 26upx;padding: 30upx;" v-for="(item, index) in alist" :index="index" :key="index">
				
				<view style="display: flex;width: 98%;">
					<view style="flex: 3;">
						<image :src="item.avatarUrl" mode="widthFix" style="width: 70%;"></image>
					</view>
					<view style="flex: 7;padding-left: 20upx;">
						<view>{{item.nickName}}</view>
						<view>{{item.phone}}</view>
						<view>找:{{item.volume}} {{item.name}} <text style="color:#A22C32;">¥{{item.price}}</text></view>
						<view style="color: #333333;">地址:{{item.area}}</view>
					</view>
				</view>
			</view>
			
			
			</view>
			<view v-else >
			<view style="font-size: 26upx;padding: 30upx;" v-for="(item, index) in blist" :index="index" :key="index">
				
				<view style="display: flex;width: 98%;">
					<view style="flex: 3;">
						<image :src="item.avatarUrl" mode="widthFix" style="width: 70%;"></image>
					</view>
					<view style="flex: 7;padding-left: 20upx;">
						<view>{{item.nickName}}</view>
						<view >{{item.phone||'暂无手机'}}</view>
					
						<view>找:{{item.volume}} {{item.name}} <text style="color:#A22C32;">¥{{item.price}}</text></view>
						<view style="color: #333333;">地址:{{item.area}}</view>
					</view>
				</view>
			</view>
			</view>
			 
			 
			 


		<uni-fab ref="fab" :pattern="pattern" :content="content" :horizontal="horizontal" :vertical="vertical" :direction="direction" @trigger="trigger" @fabClick="fabClick" />
	</view>
</template>

<script>
import uCalendar from '@/components/calendar-lch/calendar-lch.vue';
import tTable from '@/components/t-table/t-table.vue';
import tTh from '@/components/t-table/t-th.vue';
import tTr from '@/components/t-table/t-tr.vue';
import tTd from '@/components/t-table/t-td.vue';
import msTabs from '@/components/ms-tabs/ms-tabs.vue';
import uniFab from '@/components/uni-fab/uni-fab.vue';
import uCharts from '@/components/u-charts/u-charts.js';
var _self;
var canvasObj = {};
export default {
	components: {
		msTabs,
		tTable,
		tTh,
		tTr,
		tTd,
		uniFab,
		uCalendar
	},
	data() {
		return {
			uid:uni.getStorageSync('userInfo').uid,
			imgSrc:this.imgUrl,
			forbid: '',
			//顶部的商品信息
			maininfo: {},

			dateValue: '',
			dateValue2: '',
			//===========

			overdateValue: '',
			overdateValue2: '',
			periodstart:'',
			periodend:'',
			
			cWidth: '',
			cHeight: '',
			cWidth2: '', //横屏图表
			cHeight2: '', //横屏图表
			cWidth3: '', //圆弧进度图
			cHeight3: '', //圆弧进度图
			arcbarWidth: '', //圆弧进度图，进度条宽度,此设置可使各端宽度一致
			gaugeWidth: '', //仪表盘宽度,此设置可使各端宽度一致
			tips: '',
			pixelRatio: 1,
			serverData: '',
			itemCount: 30, //x轴单屏数据密度
			sliderMax: 50,
			"Area": null,
			type3: [
				{
					id: 1,
					name: '最近一星期'
				},
				{
					id: 2,
					name: '最近一个月'
				},
				{
					id: 3,
					name: '最近三个月'
				},
				{
					id: 4,
					name: '最近半年'
				},
				{
					id: 5,
					name: '自定义'
				}
			],
			type4: [
				{
					id: 1,
					name: '找'
				},
				{
					id: 2,
					name: '出'
				}
			],
			active4:0,
			inputval4:0,
			active3: 0,
			inputval: 0,
			
			//表格中的历史数据
			tableList: [],
			//===========
			title: 'uni-fab',
			directionStr: '垂直',
			horizontal: 'right',
			vertical: 'bottom',
			direction: 'horizontal',
			pattern: {
				color: '#7A7E83',
				backgroundColor: '#fff',
				selectedColor: '#a22c32',
				buttonColor: '#a22c32'
			},
			content: [
				{
					iconPath: '/static/logo.png',
					selectedIconPath: '/static/logo.png',
					text: '找酒',
					active: false
				},
				{
					iconPath: '/static/logo.png',
					selectedIconPath: '/static/logo.png',
					text: '出酒',
					active: false
				}
			],
			pid:0,
			alist:null,
			blist:null,
			stype:'b'
			//tabNum:[]
		};
	},
	onLoad(option) {
		
		
		_self = this;

		this.cWidth = uni.upx2px(750);
		this.cHeight = uni.upx2px(500);
		
	//	console.log(option.id);
		this.pid=option.id;
		this.addDate()
		this.loadData();
		//this.fillData(Data);
	},
	onPullDownRefresh() {
			this.loadData();
			//this.initline();
			//this.loadData();
	        setTimeout(function () {
	            uni.stopPullDownRefresh();  //停止下拉刷新动画
	        }, 1000);
	},
	onShow() {
		uni.startPullDownRefresh();
	},
	filters:{
		dateFormat(value){
			
			let timearr = value.replace(" ", ":").replace(/\:/g, "-").split("-");
			
			//console.log(timearr);
			
			let timestr = ""+timearr[0]+"-" + timearr[1].split("")[1] + "-" + timearr[2] + "\t" +  ""
			
			
			return timestr
		}
	},
	onBackPress() {
		if (this.$refs.fab.isShow) {
			this.$refs.fab.close();
			return true;
		}
		return false;
	},
	methods: {
		addDate() {
		                    var nowDate = new Date();
		                    let date = {
		                        year: nowDate.getFullYear(),
		                        month: nowDate.getMonth() + 1,
		                        date: nowDate.getDate(),
		                    }
		                   // console.log(date);
		                    // let systemDate = date.year + '-' +  date.month + '-' + date.date;
							
							// this.dateValue=systemDate;
							// this.dateValue2=systemDate;
							
							this.overdateValue=date.year ;
							this.overdateValue2=date.year ;
		},
		search(){
		
			// console.log(this.dateValue);
			// console.log(this.dateValue2);
			
			
			const sendData = {
				"start": this.dateValue,
				"end":this.dateValue2,
				"qid":this.pid
			};
			
			uni.request({
				url: this.webUrl + '/searchlinebytime', //仅为示例，并非真实接口地址。
				data: sendData,
				dataType: 'json',
				method: 'POST',
				header: {
					'content-type': 'application/json' // 微信默认就是
				},
				success: res => {
					if (res.statusCode !== 404) {
						console.log(res.data);
						this.tableList=res.data;
						this.active3 = 4;
						this.loadLine(this.pid);
						
					
					} else {
						console.log('数据没有');
					}
				}
			});
			
		},
		//热门搜索开关
		hotToggle() {
			this.forbid = this.forbid ? '' : '-filled';
			
			
			const sendData = {
				"uid": this.uid,
				"pid":this.pid,
				"img":this.maininfo.img,
				"pname":this.maininfo.name
			};
			
			uni.request({
				url: this.userApi + '/addfollow', //仅为示例，并非真实接口地址。
				data: sendData,
				dataType: 'json',
				method: 'POST',
				header: {
					'content-type': 'application/json' // 微信默认就是
				},
				success: res => {
					if (res.statusCode !== 404) {
						console.log(res.data);
							
					} else {
						console.log('数据没有');
					}
				}
			});
		
			
		},
		loadData(){
			
			this.loadInfo(this.pid);
			this.addsnum(this.pid);
			this.loadLine(this.pid)
			//this.loadTab();//
			
		},
		loadInfo(id){
		uni.showLoading({
		    title: '载入中...'
		});
			const sendData = {
				"id": id,
			};
			
			
			uni.request({
				url: this.webUrl+'/quotesinfo', //仅为示例，并非真实接口地址。
				data: sendData,
				dataType: 'json',
				method: 'get',
				header: {
					'content-type': 'application/json' // 微信默认就是
				},
				success: res => {
					if (res.statusCode !== 404) {
						//console.log(res.data );
						
						this.maininfo=res.data;
						this.loadSandB();
						uni.hideLoading();
					} else {
						uni.hideLoading();
						console.log("数据没有");
					}
				}
			});
			
		},
		// loadTab(){
				
		// 		uni.request({
		// 			url: this.webUrl+'/count', //仅为示例，并非真实接口地址。
		// 			data: '',
		// 			dataType: 'json',
		// 			method: 'get',
		// 			header: {
		// 				'content-type': 'application/json' // 微信默认就是
		// 			},
		// 			success: res => {
		// 				if (res.statusCode !== 404) {
		// 					//console.log(res.data );
							
		// 					//this.tabNum=res.data;
							
		// 					this.type4=[
		// 						{
		// 							id: 1,
		// 							name: '找('+res.data.b+')'
		// 						},
		// 						{
		// 							id: 2,
		// 							name: '出('+res.data.s+')'
		// 						}
		// 					];
							
						
		// 				} else {
							
		// 					console.log("数据没有");
		// 				}
		// 			}
		// 		});
		// },
		loadLine(id){
			console.log("1-dateValue2:"+this.dateValue2);
			if(!this.dateValue2){
				this.dateValue2=new Date().getFullYear()+"-"+(new Date().getMonth()+1)+"-"+new Date().getDate();
				console.log("2-dateValue2:"+this.dateValue2);
			}
			console.log("1-dateValue:"+this.dateValue2);
			if(!this.dateValue){
				
				console.log(this.dateValue);
				
				//let startTime = new Date('2019/01/17 15:28:00'.replace(/-/g, '/')).getTime();


				let tmpstartdate =new Date(new Date(this.dateValue2.replace(/-/g, '/')).getTime()-7*24*60*60*1000);
				// console.log(tmpstartdate);
				this.dateValue=tmpstartdate.getFullYear()+"-"+(tmpstartdate.getMonth()+1)+"-"+tmpstartdate.getDate();
				console.log("2-dateValue:"+this.dateValue);
			}
			
			
			
			
			const sendData = {
				"qid": id,
				"order":"DESC",
				"start": this.dateValue,
				"end": this.dateValue2

			};


			uni.request({
				url: this.webUrl+'/quoteslinelist', //仅为示例，并非真实接口地址。
				data: sendData,
				dataType: 'json',
				method: 'get',
				header: {
					'content-type': 'application/json' // 微信默认就是
				},
				success: res => {
					if (res.statusCode !== 404) {
						console.log(res);
						
						this.tableList=res.data.table;
						this.loadline2(id); //行情图为正序
												
					} else {
						
						let categoriesnew=[];
						let datanew=[];
						var j=-6;
						 for (var i = 0; i < 7; i++)
						{
							datanew.push(this.maininfo.price);
							categoriesnew.push(this.getDay(i));
							//console.log(this.GetDateStr(i));
						}
						
						
						this.Area={
							
									"categories": categoriesnew,
									"series": [{
										"name": "价格",
										"data": datanew,
										"color": "#facc14"
									}],
							
						
								
						}
						this.getServerData(this.Area);
					//	console.log("xxxx");
					//	console.log("数据没有");
					}
				}
			});
			
		},
		loadline2(id){
			const sendData = {
				"qid": id,
				"order":"ASC",
				"start": this.dateValue,
				"end": this.dateValue2
				
			};
			
			uni.request({
				url: this.webUrl+'/quoteslinelist', //仅为示例，并非真实接口地址。
				data: sendData,
				dataType: 'json',
				method: 'get',
				header: {
					'content-type': 'application/json' // 微信默认就是
				},
				success: res => {
					if (res.statusCode !== 404) {
						console.log(res);
						if(res.data.line.categories){
							if(res.data.line.categories.length==1){
								
								let onecategories=[0,res.data.line.categories[0]]
								let onedata=[0,res.data.line.data[0]]
								this.Area={
											"categories": onecategories,
											"series": [{
												"name": "价格",
												"data": onedata,
												"color": "#facc14"
											}]
									
									}
							}else{
								this.Area={
											"categories": res.data.line.categories,
											"series": [{
												"name": "价格",
												"data": res.data.line.data,
												"color": "#facc14"
											}]
									}
							}
							
							
							console.log(this.Area);
						}else{
							let categoriesnew=[];
							let datanew=[];
								var j=-6;
							    for (var i = 0; i < 7; i++)
							    {	
									
									//console.log(j);
									datanew.push(this.maininfo.price);
									categoriesnew.push(this.getDay(j));
									j=j+1;
									//console.log(this.GetDateStr(i));
							    }
							           
							
							this.Area={
								
										"categories": categoriesnew,
										"series": [{
											"name": "价格",
											"data": datanew,
											"color": "#facc14"
										}],
								
							
									
							}
						}
						
						
						// this.Area.categories=res.data.line.categories;
						// this.Area.series.data=res.data.line.data;
						this.getServerData(this.Area);
						console.log("====");					
					} 
				}
			});		
		},
		getDay(day){
		
		　　var today = new Date();
		
		
		
		　　var targetday_milliseconds=today.getTime() + 1000*60*60*24*day;
		
		
		
		　　today.setTime(targetday_milliseconds); //注意，这行是关键代码
		
		
		
		　　var tYear = today.getFullYear();
		
		　　var tMonth = today.getMonth();
		
		　　var tDate = today.getDate();
		
		　　tMonth = this.doHandleMonth(tMonth + 1);
		
		　　tDate = this.doHandleMonth(tDate);
		
		　　return tDate;
		
		},
		
		doHandleMonth(month){
		
		　　var m = month;
		
		　　if(month.toString().length == 1){
		
		　　　　m = "0" + month;
		
		　　}
		
		　　return m;
		
		},
		GetDateStr(AddDayCount) {
		             var dd = new Date();
            dd.setDate(dd.getDate() + AddDayCount);//获取AddDayCount天后的日期 
            var y = dd.getFullYear();
            var m = dd.getMonth() + 1;//获取当前月份的日期 
            var d = dd.getDate();
            var x = dd.getDay();
            return '星期' + '日一二三四五六'.charAt(dd.getDay());
		 },
				//浏览一次+1
		addsnum(id){
		
		//http://api.lujiuba.com/api/quotesview/id/1
			const sendData = {
				"id": id,
				
			};
			
			
			uni.request({
				url: this.webUrl+'/quotesview', //仅为示例，并非真实接口地址。
				data: sendData,
				dataType: 'json',
				method: 'get',
				header: {
					'content-type': 'application/json' // 微信默认就是
				},
				success: res => {
					if (res.statusCode !== 404) {
						//console.log(res.data );
						
						//this.maininfo=res.data;
					} else {
						
						console.log("数据没有");
					}
				}
			});
			
			
			
		},
		
		loadSandB(){
		
		this.alist=[];
		this.blist=[];
		//console.log(val);
		const sendData = {
			"pid": this.pid,
			
		};
		console.log(sendData);
		uni.request({
			url: this.webUrl+'/searchb', //仅为示例，并非真实接口地址。
			data: sendData,
			dataType: 'json',
			method: 'get',
			header: {
				'content-type': 'application/json' // 微信默认就是
			},
			success: res => {
				if (res.statusCode !== 404) {
					console.log(res.data );
					
					this.type4=[
											{
												id: 1,
												name: '找('+res.data.b+')'
											},
											{
												id: 2,
												name: '出('+res.data.s+')'
											}
										];
					
					this.alist=res.data.alist;
					this.blist=res.data.blist;
					//this.maininfo=res.data;
				} else {
					
					console.log("数据没有");
				}
			}
		});
			
		},
		
		inputv4(val){
			
			
			
			if(val==0){
			//找buy
				this.stype='b';
				
				
			}else{
				this.stype='s';
			}
			
		},
		inputv(val){
			console.log(val);
			console.log(this.dateValue2);
			let tmpDate = new Date(this.dateValue2).getTime();
			let tmpDate1 = "";
			switch (val){
				
				case 0:
					tmpDate1 = new Date(tmpDate - 7*24*60*60*1000);
					console.log(tmpDate1.getFullYear()+"-"+(tmpDate1.getMonth()+1)+"-"+tmpDate1.getDate());
					this.dateValue = tmpDate1.getFullYear()+"-"+(tmpDate1.getMonth()+1)+"-"+tmpDate1.getDate();

					this.loadLine(this.pid);
					break;
				case 1:
					tmpDate1 = new Date(tmpDate - 30*24*60*60*1000);
					
					console.log(tmpDate1.getFullYear()+"-"+(tmpDate1.getMonth()+1)+"-"+tmpDate1.getDate());
					this.dateValue = tmpDate1.getFullYear()+"-"+(tmpDate1.getMonth()+1)+"-"+tmpDate1.getDate();

					this.loadLine(this.pid);
					break;
				case 2:
				
					tmpDate1 = new Date(tmpDate - 3*30*24*60*60*1000);
					console.log(tmpDate1.getFullYear()+"-"+(tmpDate1.getMonth()+1)+"-"+tmpDate1.getDate());
					this.dateValue = tmpDate1.getFullYear()+"-"+(tmpDate1.getMonth()+1)+"-"+tmpDate1.getDate();

					this.loadLine(this.pid);
					break;
				case 3:
					tmpDate1 = new Date(tmpDate - 6*30*24*60*60*1000);
					console.log(tmpDate1.getFullYear()+"-"+(tmpDate1.getMonth()+1)+"-"+tmpDate1.getDate());
					this.dateValue = tmpDate1.getFullYear()+"-"+(tmpDate1.getMonth()+1)+"-"+tmpDate1.getDate();
					// this.loadData();
					this.loadLine(this.pid);
					break;
				default:
					break;
			}
			
		},
		trigger(e) {
			if(e.index==0){
				//找
				uni.navigateTo({
					url:'/pages/member/AddQiu?pid='+this.pid
				})
			}else{
				//出
				uni.navigateTo({
					url:'/pages/member/AddChu?pid='+this.pid
				})
			}
			
			//console.log(e)
			
			this.content[e.index].active = !e.item.active
			// uni.showModal({
			// 	title: '提示',
			// 	content: `您${this.content[e.index].active ? '选中了' : '取消了'}${e.item.text}`,
			// 	success: function(res) {
			// 		if (res.confirm) {
			// 			console.log('用户点击确定')
			// 		} else if (res.cancel) {
			// 			console.log('用户点击取消')
			// 		}
			// 	}
			// })
		},
		touchIt(e,id) {
		canvasObj[id].touchLegend(e, {
			animation : false
		});
				canvasObj[id].showToolTip(e, {
					format: function (item, category) {
						if(typeof item.data === 'object'){
							return category + ' ' + item.name + ':' + item.data.value 
						}else{
							return category + ' ' + item.name + ':' + item.data 
						}
					}
				});
			},
		onChange(e) {
			console.log('rate发生改变:' + JSON.stringify(e));
		},

		// 日期选中
		selectDateFun(e) {
			console.log('选择日期：', e);
			this.dateValue = e;
		},

		// 日期选中
		selectDateFun2(e) {
			console.log('选择日期：', e);
			this.dateValue2 = e;
		},

		//列的值改变时触发 columnchange 事件
		columChangeFun(e) {
			console.log('列的值改变：', e);
		},
		fabClick() {
			/*
			uni.showToast({
				title: '点击了悬浮按钮',
				icon: 'none'
			});
			*/
			
		},
		switchBtn(hor, ver) {
			if (hor === 0) {
				this.direction = this.direction === 'horizontal' ? 'vertical' : 'horizontal';
				this.directionStr = this.direction === 'horizontal' ? '垂直' : '水平';
			} else {
				this.horizontal = hor;
				this.vertical = ver;
			}
			this.$forceUpdate();
		},
		//=========================

		getServerData(Area) {
			
			this.showArea('canvasArea', Area);
			//	console.log(this.Area);
			
			// uni.showLoading({
			// 	title: '正在加载数据...'
			// });
			// uni.request({
			// 	url: 'https://unidemo.dcloud.net.cn/hello-uniapp-ucharts-data.json',
			// 	data: {},
			// 	success: function(res) {
			// 		_self.fillData(res.data);
			// 	},
			// 	fail: () => {
			// 		_self.tips = '网络错误，小程序端请检查合法域名';
			// 	},
			// 	complete() {
			// 		uni.hideLoading();
			// 	}
			//});
			
			
			
		},
		
		showArea(canvasId, chartData) {
			canvasObj[canvasId] = new uCharts({
				$this: _self,
				canvasId: canvasId,
				type: 'area',
				fontSize: 11,
				padding: [0, 15, 10, 15],
				legend: {
					show: true,
					position: 'top',
					float: 'center',
					itemGap: 30,
					padding: 5,
					lineHeight: 18,
					margin: 0
				},
				dataLabel: false,
				dataPointShape: true,
				background: '#FFFFFF',
				pixelRatio: _self.pixelRatio,
				categories: chartData.categories,
				series: chartData.series,
				animation: false,
				xAxis: {
					type: 'grid',
					gridColor: '#CCCCCC',
					gridType: 'dash',
					dashLength: 8,
					boundaryGap: 'justify' //两端不留白配置
				},
				yAxis: {
					gridType: 'dash',
					gridColor: '#CCCCCC',
					dashLength: 8,
					splitNumber: 5,
					min: 0,
					max: parseInt(this.maininfo.price) + 100,
				},
				width: _self.cWidth * _self.pixelRatio,
				height: _self.cHeight * _self.pixelRatio,
				extra: {
					area: {
						type: 'curve',
						opacity: 0.2,
						addLine: true,
						width: 2
					}
				}
			});
		}
	}
};
</script>

<style>
.cxbtn {
	margin: 0 40upx 0 20upx;
	border: 1px solid #db3542;
	border-radius: 10upx;
	background-color: #db3542;
	line-height: 50upx;
	font-size: 30upx;
	color: #fff;
	font-family: 'Courier New', Courier, monospace;
}
.inboxdata {
	flex: 3;
	border: 1px solid #dbd8dd;
	border-radius: 20upx;
	line-height: 50upx;
	text-align: center;
}
page {
	background: #f2f2f2;
	width: 750rpx;
	overflow-x: hidden;
}

.qiun-padding {
	padding: 2%;
	width: 96%;
}

.qiun-wrap {
	display: flex;
	flex-wrap: wrap;
}

.qiun-rows {
	display: flex;
	flex-direction: row !important;
}

.qiun-columns {
	display: flex;
	flex-direction: column !important;
}

.qiun-common-mt {
	margin-top: 10rpx;
}

.qiun-bg-white {
	background: #ffffff;
}

.qiun-title-bar {
	width: 96%;
	padding: 10rpx 2%;
	flex-wrap: nowrap;
}

.qiun-title-dot-light {
	border-left: 10rpx solid #0ea391;
	padding-left: 10rpx;
	font-size: 32rpx;
	color: #000000;
}

/* 通用样式 */
.qiun-charts {
	width: 750rpx;
	height: 500rpx;
	background-color: #ffffff;
}

.charts {
	width: 750rpx;
	height: 500rpx;
	background-color: #ffffff;
}

/* 横屏样式 */
.qiun-charts-rotate {
	width: 700rpx;
	height: 1100rpx;
	background-color: #ffffff;
	padding: 25rpx;
}

.charts-rotate {
	width: 700rpx;
	height: 1100rpx;
	background-color: #ffffff;
}

/* 圆弧进度样式 */
.qiun-charts3 {
	width: 750rpx;
	height: 250rpx;
	background-color: #ffffff;
	position: relative;
}

.charts3 {
	position: absolute;
	width: 250rpx;
	height: 250rpx;
	background-color: #ffffff;
}

.qiun-tip {
	display: block;
	width: auto;
	overflow: hidden;
	padding: 15rpx;
	height: 30rpx;
	line-height: 30rpx;
	margin: 10rpx;
	background: #ff9933;
	font-size: 30rpx;
	border-radius: 8rpx;
	justify-content: center;
	text-align: center;
	border: 1px solid #dc7004;
	color: #ffffff;
}
</style>

<style></style>
